<?php
$this->headLink()->appendStylesheet($this->baseUrl() . '/public/styles/datepicker/jquery.datepick.css');
$this->headScript()->prependFile($this->baseUrl() . '/public/scripts/datepicker/jquery.datepick.js');
?>
<style>
    .custom-orden-buttons{float: left; width: 500px; margin-left: 10px}
</style>
<article class="module width_full">
    <header><h3>Adicionar Orden Nueva</h3></header>
    <div class="module_content">

        <div style="display: none;">
            <img id="calImg" src="<?php echo $this->baseUrl() . '/public/img/calendar-blue.gif' ?>" alt="Popup" class="trigger">
        </div>

        <form id="custom-orden" method="POST" action="<?php echo $this->url(); ?>">
            <fieldset title="Nueva orden">
                <legend style="display: none;">Titulo - Descripci&oacute;n</legend>
                <p style="float: left; width: 480px;">
                    <label>Titulo:</label>
                    <input type="text" name="title" id="title" />
                </p>
                <p style="float: left; width: 480px;">
                    <label>Descripci&oacute;n:</label>
                    <textarea name="description" id="description" rows="5" cols="60"></textarea>
                </p>
            </fieldset>

            <fieldset title="Fechas">
                <legend style="display: none;">Limite de fechas</legend>
                <p style="float: left; width: 480px;">
                    <label>Fecha de inicio</label>
                    <input type="text" id="create_date" name="create_date" style="float: left; width: 430px;"/>
                </p>
                <p style="float: left; width: 480px;">
                    <label>Fecha limite</label>
                    <input type="text" id="end_date" name="end_date" style="float: left; width: 430px;"/>
                </p>
            </fieldset>

            <fieldset title="Agencias">
                <legend style="display: none;">Para la agencia ..... ?</legend>

                <div id="listDep" style="float: left; width: 50%; padding-left: 20px;">
                    <p style="float: left; width: 480px;"><label>Agencias:</label></p>
                    <?php foreach ($this->departaments as $dep): ?>
                        <p><input type="checkbox" class="checkbox" id="checkDepartament" name="checkDepartament[]" value="<?php echo $dep->id ?>"/><?php echo $dep->name ?></p>
                    <?php endforeach; ?>
                    <p><input type="checkbox" name="checkAllDep" id="checkAllDep" onclick="jqCheckAll3(this.id, 'listDep');"/> Todos</p>
                </div>

                <div id="listJob" style="float: left; width: 40%; padding-left: 20px;">
                    <p style="float: left; width: 480px;"><label>Trabajo a realizar:</label></p>
                    <?php foreach ($this->typejobs as $job): ?>
                        <p><input type="checkbox" class="checkbox" name="checkJob[]" id="checkJob" value="<?php echo $job->id ?>"/><?php echo $job->name ?></p>
                    <?php endforeach; ?>
                    <p><input type="checkbox" name="checkAllJob" id="checkAllJob" onclick="jqCheckAll3(this.id, 'listJob');"/> Todos</p>
                </div>

            </fieldset>


            <input type="submit" class="finish" value="Enviar Orden" />
        </form>
    </div>
    <footer></footer>
</article>

<script>
    function jqCheckAll3( id, pID ){
        $( "#" + pID + " :checkbox").attr('checked', $('#' + id).is(':checked'));
    }

    $(function() {
        $('#create_date, #end_date').datepick({
            showOnFocus: false, 
            showTrigger: '#calImg',
            dateFormat: 'dd-mm-yyyy'
        });
    });
</script>
<script language="javascript">
    $('#custom-orden').stepy({
        backLabel:	'Atras',
        block:		true,
        errorImage:	true,
        nextLabel:	'Siguiente',
        titleClick:	true,
        validate:	true
    });
    // Optionaly
    $('#custom-orden').validate({
        errorPlacement: function(error, element) {
            $('#custom-orden div.stepy-error').append(error);
        }, rules: {
            'title':		'required',
            'description':	'required',
            'create_date':	'required',
            'end_date':         'required',
            'checkDepartament[]':	{ required:true, minlength: 1 },
            'checkJob[]':		{ required:true, minlength: 1 }
        }, messages: {
            'title':		{ required: '*Ingrese el titulo' },
            'description':	{ required: '*Ingrese la descripcion' },
            'create_date':	{ required: '*Ingrese la fecha de incio' },
            'end_date':         { required: '*Ingrese la fecha limite' },
            'checkDepartament[]':	{ required: '*Seleccione al menos una agencia', minlength: '*Seleccione al menos una agencia' },
            'checkJob[]':		{ required: '*Seleccione al menos un trabajo a realizar', minlength: '*Seleccione al menos una agencia' }
        }
    });
</script>